﻿<controls:Flyout x:Class="MetroDemo.ExampleWindows.CustomFlyout"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                 xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
                 mc:Ignorable="d"
                 d:DesignHeight="600"
                 d:DesignWidth="300"
                 Width="250"
                 x:Name="customFlyout"
                 Header="Custom Flyout"
                 Position="Right"
                 CloseCommand="{Binding ElementName=customFlyout, Path=CloseCmd}">

    <controls:Flyout.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.ListView.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/FlatSlider.xaml" />
            </ResourceDictionary.MergedDictionaries>
            
            <!-- for testing -->
            <SolidColorBrush x:Key="ListViewBackground" Color="White" />
            
            <Style x:Key="CustomListViewItemStyle"
                   TargetType="{x:Type ListViewItem}"
                   BasedOn="{StaticResource MetroListViewItem}">
                <Setter Property="Foreground"
                        Value="Black" />
            </Style>
            <Style x:Key="CustomGridViewColumnHeader"
                   TargetType="{x:Type GridViewColumnHeader}"
                   BasedOn="{StaticResource MetroGridViewColumnHeader}">
                <Style.Resources>
                    <SolidColorBrush x:Key="GrayBrush8"
                                     Color="#FFE0E0E0" />
                </Style.Resources>
                <Setter Property="Foreground"
                        Value="Black" />
            </Style>
        </ResourceDictionary>
    </controls:Flyout.Resources>

    <StackPanel Orientation="Vertical"
                Margin="10">

        <CheckBox Content="CanCloseFlyout"
                  IsChecked="{Binding ElementName=customFlyout, Path=CanCloseFlyout}"
                  Margin="5" />

        <Slider Style="{StaticResource FlatSlider}"
                Margin="5"
                Value="50" />

        <ListView Style="{StaticResource VirtualisedMetroListView}"
                  Height="200"
                  Margin="0, 10, 0, 0"
                  BorderThickness="0"
                  ItemsSource="{Binding ElementName=customFlyout, Path=Artists}"
                  SelectedIndex="0">
            <ListView.View>
                <GridView>
                    <GridViewColumn DisplayMemberBinding="{Binding ArtistId}"
                                    Header="ID" />
                    <GridViewColumn DisplayMemberBinding="{Binding Name}"
                                    Header="artist" />
                </GridView>
            </ListView.View>
        </ListView>

        <ListView Style="{StaticResource VirtualisedMetroListView}"
                  Height="200"
                  Margin="0, 10, 0, 0"
                  BorderThickness="0"
                  ItemContainerStyle="{StaticResource CustomListViewItemStyle}"
                  Background="{StaticResource ListViewBackground}"
                  ItemsSource="{Binding ElementName=customFlyout, Path=Artists}"
                  SelectedIndex="0">
            <ListView.View>
                <GridView ColumnHeaderContainerStyle="{StaticResource CustomGridViewColumnHeader}">
                    <GridViewColumn DisplayMemberBinding="{Binding ArtistId}"
                                    Header="ID" />
                    <GridViewColumn DisplayMemberBinding="{Binding Name}"
                                    Header="artist" />
                </GridView>
            </ListView.View>
        </ListView>
        
    </StackPanel>

</controls:Flyout>
